<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page import="com.drerp.util.Constantes"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Edita a foto</title>
<style type="text/css">

#webcam, #canvas {
	width: 320px;
	border:20px solid #333;
	background:#eee;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

#webcam {
	float:left;
	position:relative;
	margin-top:50px;
	margin-bottom:50px;
}

#botoes {
	margin:0 auto;
	padding: 0 auto;
	text-align: center;
}

#webcam > span {
	z-index:2;
	position:absolute;
	color:#eee;
	font-size:10px;
	bottom: -16px;
	left:152px;
}

#webcam > img {
	z-index:1;
	position:absolute;
	border:0px none;
	padding:0px;
	bottom:-40px;
	left:89px;
}

#webcam > div {
	border:5px solid #333;
	position:absolute;
	right:-90px;
	padding:5px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	cursor:pointer;
}

#webcam a {
	background:#fff;
	font-weight:bold;
}

#webcam a > img {
	border:0px none;
}

#canvas {
	margin-top:50px;
	margin-bottom:50px;
	margin-left: 20px;
	clear:both;
	border:20px solid #ccc;
	background:#eee;
}

#flash {
	position:absolute;
	top:0px;
	left:0px;
	z-index:5000;
	width:100%;
	height:500px;
	background-color:#646464;
	display:none;
}

object {
	display:block; /* HTML5 fix */
	position:relative;
	z-index:1000;
}

</style>

<script type="text/javascript" src="../js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="../js/jquery.webcam.js"></script>
<link rel="StyleSheet" href="../styles.css" type="text/css" media=screen />
</head>
<body>
<div id="webcam">
	<span>Sorria :)</span>
</div>

<canvas id="canvas" height="240" width="320" ></canvas>

<div id="botoes">
<a class = "button" href="javascript:webcam.capture();void(0);">Tirar foto agora</a>
<a class = "button" id ="closeButton" href="#">fechar</a>
</div>
<script type="text/javascript">

$('#closeButton').click(function(e) {
    window.opener.location.reload(true);
    window.close();
    e.preventDefault();
});

var pos = 0;

var ctx = null;

var cam = null;

var image = null;


var filter_id = 0;


jQuery("#webcam").webcam({



	width: 320,

	height: 240,

	mode: "callback",

	 swffile: "../js/jscam_canvas_only.swf",


	onSave: function(data) {

		var col = data.split(";");
		var img = image;

		 for(var i = 0; i < 320; i++) {
             var tmp = parseInt(col[i]);
             img.data[pos + 0] = (tmp >> 16) & 0xff;
             img.data[pos + 1] = (tmp >> 8) & 0xff;
             img.data[pos + 2] = tmp & 0xff;
             img.data[pos + 3] = 0xff;
             pos+= 4;
     }
		 
		  if (pos >= 4 * 320 * 240) {
              ctx.putImageData(img, 0, 0);
              $.post("salva_foto.jsp", {type: "data", image: canvas.toDataURL("image/png"), id:<%=Long.parseLong(request.getParameter("id"))%>});
              pos = 0;
      }

		if (pos >= 0x4B000) {

			ctx.putImageData(img, 0, 0);

			pos = 0;

		}

	},



	onCapture: function () {

		webcam.save();

		jQuery("#flash").css("display", "block");

		jQuery("#flash").fadeOut(100, function () {

			jQuery("#flash").css("opacity", 1);

		});

	},



	debug: function (type, string) {

		jQuery("#status").html(type + ": " + string);

	},



	onLoad: function () {



		var cams = webcam.getCameraList();

		for(var i in cams) {

			jQuery("#cams").append("<li>" + cams[i] + "</li>");

		}

	}

});



function getPageSize() {



	var xScroll, yScroll;



	if (window.innerHeight && window.scrollMaxY) {

		xScroll = window.innerWidth + window.scrollMaxX;

		yScroll = window.innerHeight + window.scrollMaxY;

	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac

		xScroll = document.body.scrollWidth;

		yScroll = document.body.scrollHeight;

	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari

		xScroll = document.body.offsetWidth;

		yScroll = document.body.offsetHeight;

	}



	var windowWidth, windowHeight;



	if (self.innerHeight) { // all except Explorer

		if(document.documentElement.clientWidth){

			windowWidth = document.documentElement.clientWidth;

		} else {

			windowWidth = self.innerWidth;

		}

		windowHeight = self.innerHeight;

	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode

		windowWidth = document.documentElement.clientWidth;

		windowHeight = document.documentElement.clientHeight;

	} else if (document.body) { // other Explorers

		windowWidth = document.body.clientWidth;

		windowHeight = document.body.clientHeight;

	}



	// for small pages with total height less then height of the viewport

	if(yScroll < windowHeight){

		pageHeight = windowHeight;

	} else {

		pageHeight = yScroll;

	}



	// for small pages with total width less then width of the viewport

	if(xScroll < windowWidth){

		pageWidth = xScroll;

	} else {

		pageWidth = windowWidth;

	}



	return [pageWidth, pageHeight];

}



window.addEventListener("load", function() {



	jQuery("body").append("<div id=\"flash\"></div>");



	var canvas = document.getElementById("canvas");



	if (canvas.getContext) {

		ctx = document.getElementById("canvas").getContext("2d");

		ctx.clearRect(0, 0, 320, 240);



		var img = new Image();

		img.src = "/static/logo.gif";

		img.onload = function() {

			ctx.drawImage(img, 129, 89);

		}

		image = ctx.getImageData(0, 0, 320, 240);

	}

	

	var pageSize = getPageSize();

	jQuery("#flash").css({ height: pageSize[1] + "px" });



}, false);



window.addEventListener("resize", function() {



	var pageSize = getPageSize();

	jQuery("#flash").css({ height: pageSize[1] + "px" });



}, false);



</script>

</body>
</html>